<template>
    <section v-loading="loading">
        <el-steps ref="steps" :space="200" :active="step">
            <el-step title="上传" description="上传完整的配置表"></el-step>
            <el-step title="转换" description="转换配置表为合适的格式"></el-step>
            <el-step title="部署" description="部署到服务器"></el-step>
        </el-steps>
        <el-upload v-if="step=== 1" class="upload-demo" accept="*.xlsx" drag with-credentials :headers="uploadHeader" :action="upload_url" multiple :on-error="onUploadErr">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或
                <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">上传你的完整配置表目录</div>
        </el-upload>
        <el-button v-if="step === 1" v-on:click="processParsing" type="primary">开始转换</el-button>

        <div v-for="status in this.process_status" class="progress_bar">
            {{status.name}}
            <el-progress :text-inside="true" :stroke-width="18" :percentage="status.progress*100" :status="status.done ? 'success' : ''">
            </el-progress>
        </div>
    </section>
</template>

<script>
    import {
        api_url_base,
        parseClientData,
        cleanTempUrl,
        getProcessStatus,
        combineClientData,
        processUpload
    } from '../../api/api';
    import cookie from './../../common/js/cookie_utils.js'
    import {
        mapState,
        mapGetters
    } from 'vuex'
    export default {
        data() {
            return {
                uploadHeader: {},
                upload_url: `${api_url_base}/upload`,
                step: 1,
                process_status: [],
                filters: {
                    name: ''
                },
                loading: false,
                profiles: []
            }
        },
        methods: {
            processParsing() {
                this.step = 2
                let combine_started = false
                let combine_end = false
                let deploy_end = false
                let self = this
                // this.loading = true
                parseClientData().then(res => {
                    console.log(res)
                    let timer
                    timer = setInterval(function() {
                        getProcessStatus().then(res => {
                            console.log(res)
                            self.process_status = res.data.statusList
                            if (res.data.statusList[1].done && !combine_started) {
                                combine_started = true
                                combineClientData().then(res => {
                                    // clearInterval(timer)
                                    // combine_end = true
                                    console.log(res)
                                }, err => {
                                    clearInterval(timer)
                                    console.log(err)
                                    self.onErr(err)
                                })
                            } else if (res.data.statusList[2].done && !combine_end) {
                                combine_end = true
                                self.step = 3
                                processUpload().then(res => {
                                    // clearInterval(timer)
                                    // combine_end = true
                                    console.log(res)
                                }, err => {
                                    clearInterval(timer)
                                    console.log(err)
                                    self.onErr(err)
                                })
                                console.log('编译完了')
                            } else if (res.data.statusList[3].done && !deploy_end) {
                                deploy_end = true
                                clearInterval(timer)
                                console.log('部署完了')
                                self.loading = false
    
                                self.$alert('部署已经完成','完成', {
                                    confirmButtonText: '确定',
                                    // callback: action => {
                                    //     self.$message({
                                    //     type: 'info',
                                    //     message: `action: ${ action }`
                                    //     });
                                    // }
                                });
                            }
                        }, err => {
                            clearInterval(timer)
                            console.log(err)
                            self.onErr(err)
                        })
                    }, 3000)
                })
            },
            onErr_common(err) {
                this.$message({
                    message: err.response.data.msg ? err.response.data.msg : err.response.statusText,
                    type: 'error'
                });
                if (err.response.data.redirect) {
                    this.$router.replace(err.response.data.redirect)
                }
            },
            onErr(err) {
                this.loading = false
                this.$alert(err.response.data.msg ? err.response.data.msg : err.response.statusText, '部署失败',  {
                                confirmButtonText: '确定',
                                // callback: action => {
                                //     self.$message({
                                //     type: 'info',
                                //     message: `action: ${ action }`
                                //     });
                                // }
                            });
                // this.$message({
                //     message: err.response.data.msg ? err.response.data.msg : err.response.statusText,
                //     type: 'error'
                // });
            },
            onUploadErr(err, file, fileList) {
                console.log(file)
                this.$message({
                    message: `文件${file.name}上传失败`,
                    type: 'error'
                });
            }
        },
        computed: {
            ...mapGetters({
                profile: 'getCurProfile',
                // ...
            })
        },
        mounted() {
            this.loading = true
            console.log('aaaaaa')
            console.log(this.profile)
            cleanTempUrl(this.profile).then(res => {
                // this.$store.dispatch('updateCurrProfile', params)
                console.log(res)
                this.loading = false
            },err=>{
                this.onErr_common(err)
            })
            let crsftoken = cookie.getCookie('csrftoken')
            console.log(crsftoken)
            this.uploadHeader["X-CSRFToken"] = crsftoken
        }
    };
</script>

<style scoped>
.progress_bar{
    margin-top: 10px 
}

el-progress{
    padding-top: 10px 
}
</style>


